<template>
  <div class="navbar-inner filter">
    <ul class="sui-nav">
      <li  v-for="btn in btns" :key="btn.id"
           @click="sortFn(btn.index)" :class="{active:isActive(btn.index)}">
        <a href="javascript:;">
          <span>{{btn.name}} </span>
          <span v-show="isActive(btn.index)" :class="sortClass"></span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "sortBtns",
    props:["btns","order"],
    data(){
      return {
        sortOrder:this.order
      }
    },
    computed:{
      /*排序相关的按钮 到底哪一个该选中*/
      isActive(){
        return (index)=>{
          return this.sortOrder.split(`:`)[0] === index
        }
      },
      sortClass(){
        return this.sortOrder.split(`:`)[1]===`desc`?`damu-thumb_down`:`damu-thumb_up`
      }
    },
    methods:{
      //排序相关方法
      async sortFn(flag){
        //flag:`1` 代表点击了综合
        //flag:`2` 代表点击了价格
        const oldFlag = this.sortOrder.split(":")[0];
        if(flag === oldFlag){
          //如果点击的是已经选中的按钮 则进行升序降序的切换
          const oldSortWay = this.sortOrder.split(":")[1];
          const newSortWay = oldSortWay === "desc" ? "asc" : "desc";
          // 通知外部的逻辑 当前排序按钮组件中的按钮状态发生了改变
          this.sortOrder = `${flag}:${newSortWay}`
          this.$emit("btnChange",`${flag}:${newSortWay}`)
        }else {
          //如果点击的是一个新的按钮 则默认降序
          // 通知外部的逻辑 当前排序按钮组件中的按钮状态发生了改变
          this.sortOrder = `${flag}:desc`
          this.$emit("btnChange",`${flag}:desc`)
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .filter {
    min-height: 40px;
    padding-right: 20px;
    background: #fbfbfb;
    border: 1px solid #e2e2e2;
    padding-left: 0;
    border-radius: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

    .sui-nav {
      position: relative;
      left: 0;
      display: block;
      float: left;
      margin: 0 10px 0 0;

      li {
        float: left;
        line-height: 18px;

        a {
          display: block;
          cursor: pointer;
          padding: 11px 15px;
          color: #777;
          text-decoration: none;
        }

        &.active {
          a {
            background: #e1251b;
            color: #fff;
          }
        }
      }
    }
  }
</style>